<template>
    <div class="container-page">
        <searchBar ref="searchBarRef" @add="addHandle" @search="search" @refresh="refresh" @allLog="allLogHandle" />
        <el-row :gutter="10" style="height:calc(100% - 50px);">
            <el-col :span="24" class="height_100">
                <div class="container-card bg_linear" ref="containerCardRef">
                    <div ref="pointsBoxRef"></div>
                    <ayjTable ref="tableRef" :hasMore="hasMore" :loading="loading" @load-more="loadMoreData"
                        :columns="columns" :data="tableData" :height="dynamicHeight">
                        <template #column-devno="{ row }">
                            <span class="font_bule under-line" @click="itemClick(row)"> {{ row.devno || '--' }}
                            </span>
                        </template>
                        <template #column-time_txt="{ row }">
                            <span> {{ row.time_txt || '--' }} </span>
                        </template>
                        <template #column-operate="{ row }">
                            <div class="">
                                <el-button type="text" class="pd0" @click="openHandle(row)"
                                    icon="el-icon-tickets">开机记录</el-button>
                                <el-button type="text" class="font_red pd0 ml5" @click="delHandle(row)"
                                    icon="el-icon-delete-solid">删除</el-button>
                            </div>
                        </template>
                    </ayjTable>
                </div>
            </el-col>
        </el-row>
        <detaillDialog ref="detaillDialogRef" :data="rowData"></detaillDialog>
        <addDialog ref="addDialogRef" :data="rowData" @addBack="addBack"></addDialog>
        <logDrawer ref="logDrawerRef" :data="rowLogData" :isShowDevno="isShowDevno"></logDrawer>
    </div>
</template>

<script setup>
import { ref, onMounted, getCurrentInstance, watch, onUnmounted, computed, onBeforeUnmount, defineProps } from '@vue/composition-api'
import config from "@/js/conf/Config.js"
import { useCommonHooks } from '@/hooks/useCommonHooks.js'
import searchBar from '@/pages/device/device/components/searchBar.vue'
import detaillDialog from '@/pages/device/device/components/detaillDialog.vue'
import addDialog from '@/pages/device/device/components/addDialog.vue'
import logDrawer from '@/pages/device/device/components/logDrawer.vue'
import { useDynamicHeight } from '@/hooks/useDynamicHeight'

// 获取当前组件实例
const { proxy } = getCurrentInstance()
// 使用全局状态


// 使用动态高度 hooks
const containerCardRef = ref(null)
const pointsBoxRef = ref(null)
const { dynamicHeight, updateHeight } = useDynamicHeight({
    containerRef: containerCardRef,
    subtractRef: pointsBoxRef,
    extraHeight: 30 // 额外的间距
})

const query = ref({
    pfrom: 0,
    pnum: 20,
    devno: '',
})

const isShowDevno = ref(false)
const deviceListRef = ref(null)
const hasMore = ref(false);
const loading = ref(false);
const loadMoreData = () => {

}

const rowData = ref({})
const detaillDialogRef = ref(null)
const itemClick = (row) => {
    detaillDialogRef.value.open()
    rowData.value = row
}

const tableData = ref([])
const columns = computed(() => [
    {
        title: '序号',
        prop: 'index',
        width: '80px',
        align: 'center',
        render: (row, column, index) => index + 1,
    },
    { title: '设备编号', prop: 'devno', align: 'left', width: '20%', slot: true },
    { title: '设备名称', prop: 'type_name', width: '15%' },
    { title: '设备型号', prop: 'type_code', width: '15%' },
    { title: '云店', prop: 'shop_title', align: 'left', width: '15%' },
    { title: '新增时间', prop: 'time_txt', align: 'center', width: '15%', slot: true },
    { title: '操作', prop: 'operate', align: 'center', slot: true },
])

onMounted(() => {
    getDevsetList()
})


const addDialogRef = ref(null)
const addHandle = () => {
    addDialogRef.value.open()
}

const addBack = () => {
    addDialogRef.value.close()
    reset()
    getDevsetList()
}

const search = (e) => {
    reset()
    query.value.devno = e
    getDevsetList()
}
const refresh = () => {
    reset()
    getDevsetList()
}

// 开机记录
const logDrawerRef = ref(null)
const rowLogData = ref({})
const openHandle = (row) => {
    isShowDevno.value = true
    rowLogData.value = row
    logDrawerRef.value.open()
}

// 全部开机记录
const allLogHandle = (row) => {
    rowLogData.value = { ...row, type: 'allLog' }
    isShowDevno.value = false
    logDrawerRef.value.open()
}

// 删除
const delHandle = (row) => {
    proxy.$confirm(`此操作将删除【${row.type_name}】, 是否继续?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    }).then(async () => {
        let params = {
            devno: row.devno,
            act: 'del'
        }
        let res = await proxy.$api({ url: config.devset_save_del, data: params });
        if (res.status == 1) {
            proxy.$message({
                message: '删除成功',
                type: 'success'
            });
            reset()
            getDevsetList()
        } else {
            proxy.$message({
                message: res?.msg || '删除失败',
                type: 'error'
            })
        }
    }).catch(() => {
        // proxy.$message({
        //     type: 'info',
        //     message: '已取消删除'
        // });
    });
}

const reset = () => {
    query.value.devno = ''
    query.value.pfrom = 0;
    tableData.value = [];
}

const getDevsetList = async () => {
    try {
        let param = {
            ...query.value
        };
        loading.value = true
        let res = await proxy.$api({ url: config.devset_get_ls, data: param });
        if (res.status == 1) {
            let list = res?.data?.ls || []
            if (list && list.length > 0) {
                tableData.value = tableData.value.concat(list || [])
                hasMore.value = (list.length || 0) >= query.value.pnum ? true : false
                console.log("tableData.value==", tableData.value)
            } else {
                hasMore.value = false
            }
        }
        loading.value = false
    } catch (error) {
        loading.value = false
        hasMore.value = false

        // proxy.$message({
        //     message: '操作失败',
        //     type: 'error'
        // });
    }
}


// 组件销毁时清除数据
onBeforeUnmount(() => {
})

onUnmounted(() => {
})

defineExpose({
})

</script>

<style lang="scss" scoped>
.container-page {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    padding: 10px;
    background: linear-gradient(90deg, #f6f4f7 0%, #faf3fb 100%);
}

.sale-container {
    box-sizing: border-box;
    height: 100%;
}

.container-card {
    padding: 10px;
    box-sizing: border-box;
    border-radius: 10px;
    height: 100%;
    overflow: hidden;
    overflow-y: auto;
    border: 1px solid #fff;
}

.height_100 {
    height: 100%;
}

.pd0 {
    padding: 0 !important;
}
</style>